<template>
  <div class="editor-frame">
    <div class="editor-toolbar">
      <el-select v-model="currentLang" placeholder="请选择">
        <el-option
          v-for="l in supportedLangs"
          :key="l.index"
          :label="l.name"
          :value="l.code"
        ></el-option>
      </el-select>
    </div>
    <PrismEditor
      class="editor"
      v-model="codes"
      :highlight="highlighter"
      line-numbers
    ></PrismEditor>
  </div>
</template>

<script>
// vue-prism-editor
import editorControllerObj from '@/utils/CodeEditorController.js'
import { PrismEditor } from 'vue-prism-editor'
import 'vue-prism-editor/dist/prismeditor.min.css'
//prismjs
import { highlight, languages } from 'prismjs/components/prism-core'
import 'prismjs/components/prism-sql'
import 'prismjs/themes/prism-tomorrow.css'

export default {
  name: 'code-editor',
  components: { PrismEditor },
  data() {
    return {
      supportedLangs: editorControllerObj.getSupportedLangs().getData(),
      currentLang: '',
      codes: "SELECT *\nFROM dwd.dwd_table_1_i_d\nWHERE dt = '2021-12-01';"
    }
  },
  methods: {
    highlighter(code) {
      // console.log(languages)
      return highlight(code, languages.sql) // languages.<insert language> to return html with markup
    }
  }
}
</script>

<style>
.editor-frame {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.editor,
.prism-editor__textarea,
.prism-editor__editor,
.prism-editor__line-numbers {
  font-size: 18px;
}

.editor {
  width: 100%;
  background: #2d2d2d;
  color: #ccc;

  /* you must provide font-family font-size line-height. Example: */
  /* font-family: Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace; */
  font-family: 'Courier New';
  font-weight: 550;
  line-height: 1.5;
  padding: 10px;
  margin-top: 20px;
}

.prism-editor__textarea:focus {
  outline: none;
}
</style>
